<template>
  <div class="my">
    <div class="type">
      <span class="iconfont" @click="goto()">&#xe779;</span>
      我的
      <router-link to="/home/search"
        ><span class="iconfont">&#xe86e;</span></router-link
      >
    </div>
    <img src="../assets/my.png" alt="" />
    <o-state></o-state>
    <ul class="tab">
      <router-link to="">
        <li @click="kt()">
          <i class="iconfont">&#xea00;</i>
          <p>成为分销商</p>
          <span class="iconfont">&#xe775;</span>
        </li></router-link
      >
      <router-link to="/home/collection">
        <li>
          <i class="iconfont">&#xe666;</i>
          <p>我的收藏</p>
          <span class="iconfont">&#xe775;</span>
        </li>
      </router-link>
      <router-link to="/home/address">
        <li>
          <i class="iconfont">&#xe64e;</i>
          <p>收货地址</p>
          <span class="iconfont">&#xe775;</span>
        </li>
      </router-link>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.my {
  width: 100%;
  overflow: hidden;
  background-color: rgb(236, 236, 236);
  .type {
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: rgb(116, 116, 116);
    text-align: center;
    background-color: white;
    span {
      position: absolute;
      display: block;
      height: 50px;
      width: 40px;
    }
    a {
      display: block;
      span {
        position: absolute;
        display: block;
        height: 50px;
        color: rgb(116, 116, 116);
        font-size: 25px;
        width: 40px;
        right: 0;
        top: 0;
      }
    }
  }
  > img {
    margin-top: 50px;
    width: 100%;
  }
  .tab {
    background-color: white;
    margin-top: 10px;
    a {
      display: block;
      li {
        display: flex;
        border-bottom: 1px solid #ccc;
        line-height: 60px;
        padding: 0 15px;
        position: relative;
        i {
          font-size: 30px;
          color: red;
        }
        p {
          margin-left: 10px;
          font-size: 16px;
        }
        span {
          position: absolute;
          right: 20px;
        }
      }
    }
    a:nth-child(2) i {
      color: rgb(207, 207, 0);
    }
    a:nth-child(3) i {
      color: skyblue;
    }
  }
}
</style>
<script>
import oState from "@/components/ostate.vue";
export default {
  name: "my",
  components: {
    oState,
  },
  methods:{
    kt(){
alert('还未开通该功能，敬请期待')
    }
  }
};
</script>